<script setup lang="ts">
import { registerMap } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'
import useEcharts, { type EChartsOption } from '~/composables/chart'
import { sleep } from '~/utils/sleep'

import 'echarts-gl'

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: number, center: [number, number] }[]>([])
const option = computed<EChartsOption>(() => {
  return {
    title: {
      show: false,
      text: `全国客户分布图`,
      textStyle: {
        fontWeight: 500,
        fontSize: 16,
        opacity: 0.7,
      },
    },
    tooltip: {
      confine: true,
    },
    geo3D: {
      map: 'china',
      regionHeight: 4, // 区域高度，控制 2.5D 效果强度
      shading: 'realistic', // 使用 realistic 阴影效果
      environment: 'auto', // 设置背景为白色
      // realisticMaterial: {
      //   detailTexture: imageElement,
      // },
      itemStyle: {
        // color: '#1e90ff', // 区域基础颜色
        color: '#2E89FA', // 区域基础颜色
        opacity: 1,
        borderWidth: 1, // 增加边界线宽度
        borderColor: '#000', // 边界线颜色设为黑色
        // 添加斜面效果使边界更清晰
        bevelSize: 0.2,
        bevelThickness: 0.2,
        bevelSmoothness: 2,
      },
      emphasis: {
        itemStyle: {
          // color: '#ff4500', // 高亮颜色
          color: '#1e90ff', // 高亮颜色
          borderWidth: 1.5, // 高亮时边界线加粗
          borderColor: '#000',
        },
      },
      light: {
        main: {
          intensity: 1.5, // 增加主光源强度
          shadow: true,
          shadowQuality: 'high',
          alpha: 55,
          beta: 10,
        },
        ambient: {
          intensity: 0.8, // 增加环境光强度
        },
      },

      viewControl: {
        distance: 90, // 视角距离
        alpha: 60, // 上下旋转角度
        beta: 0, // 左右旋转角度
        autoRotate: false, // 自动旋转
        autoRotateSpeed: 10, // 旋转速度
        // 禁用平移和缩放以保持清晰度
        disablePan: true,
        zoomSensitivity: 0,
        rotateSensitivity: 0,
      },
    },
    series: [{
      name: '客户分布',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      symbolSize: 15,
      symbol: 'pin',
      itemStyle: {
        color: '#b5fdb4',
      },
      data: data.value.map(v => ({
        name: v.name,
        value: [...v.center, v.value],
      })),
      label: {
        show: true,
        formatter: '{b}',
        position: 'right',
        color: '#fff',
      },
      z: 12,
    }],
  }
})

async function getGeoData() {
  // const res = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
  const res = await fetch('https://api.ppmark.cn/chart-assets/asset/get/s/data-1528971808162-BkOXf61WX.json')
  const data = await res.json()
  registerMap('china', data)
  return data
}

function getRandomProvinces(provinces: any[], n: number) {
  const shuffled = [...provinces].sort(() => 0.5 - Math.random())
  return shuffled.filter(v => v.properties.name && v.properties.center).slice(0, n)
}

onMounted(async () => {
  const geoJson = await getGeoData()
  const provinces = geoJson.features
  const markedProvinces = getRandomProvinces(provinces, 10)
  await sleep()
  data.value = markedProvinces.map((v) => {
    return {
      name: v.properties.name,
      center: v.properties.center,
      value: Math.round(Math.random() * 1000),
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div ref="chartRef" style="width:100%;height:100%" />
</template>
